import React,  {Component} from 'react';

import { Table, Radio,Checkbox ,Input, InputNumber, Popconfirm, Form ,Select,Button, DatePicker,Modal,Row, Col} from 'antd';

import ReactDOM from 'react-dom';
import  CenterTab from '@/components/CenterTable/centertable'
import PageHeaderWrapper from '@/components/PageHeaderWrapper'; //引入面包屑

import styles from './usercenter.less'

import moment from 'moment';

const { MonthPicker, RangePicker } = DatePicker;

const dateFormat = 'YYYY/MM/DD';
const monthFormat = 'YYYY/MM';

// 单选框
const RadioGroup = Radio.Group;
const Option = Select.Option;
class   UserCenter extends React.Component {
    constructor(props) {
      super(props);
    }

    state = { visible: false,
        value: 1,
    
    }
//单选框
onChange = (e) => {
    console.log('radio checked', e.target.value);
    this.setState({
      value: e.target.value,
    });
  }
    showModal = () => {
      this.setState({
        visible: true,
      });
    }
  
    handleOk = (e) => {
      console.log(e);
      this.setState({
        visible: false,
      });
    }
  
    handleCancel = (e) => {
      console.log(e);
      this.setState({
        visible: false,
      });
    }

    // 选择框事件
    checkChange(e){
        console.log("----",e.target)
    }
    //日期面板发生变化时的回调
    datatime(value,mode){
        console.log(mode)
    }
    //下拉框的事件
    handleChange(value){
       console.log(value)
    }

    //文本框的事件
    textareaValue(value){
       console.log("===",value)
    }

    changename = (e) => {
        console.log(e)
    }

    render(){
      return(
        <PageHeaderWrapper >  
         <div>
        
                <div  className={styles.gutterexample} >
                    <div className={styles.userflex}>
                          <div  className={styles.start}>
                            <div>
                               关键词：
                            </div>
                            <div>
                            <Input size="default" onChange={(e)=>this.changename(e)} placeholder="large size" />
                            </div>
                        </div>  
                    <div  className={styles.start} >
                            <div style={{width:100}}>
                              起止时间：
                            </div>
                                <RangePicker
                                className={styles.timeinput}
                                defaultValue={[moment('2015/01/01', dateFormat), moment('2015/01/01', dateFormat)]}
                                format={dateFormat}
                                onChange={this.datatime.bind(this)}
                                />
                        </div>
                        </div>
                        <div className={styles.buttons}>
                          <div><Button type="primary"  style={{width:200}} >查询</Button></div>
                        </div>
                    </div>
             <div className={styles.status}>
             <div className={styles.statusbox} >
                <div>
                    活动状态：
                </div>  
                <RadioGroup onChange={this.onChange} value={this.state.value}>
                    <Radio value={1}>全部开始</Radio>
                    <Radio value={2}>未开始</Radio>
                    <Radio value={3}>进行中</Radio>
                    <Radio value={4}>已结束</Radio>
                </RadioGroup>
                </div>
              <div>
                  <Button type="primary" style={{zIndex:7,marginTop:10,width:200}} onClick={this.showModal}>
                              添加
                            </Button>
                            <Modal
                                title="添加"
                                visible={this.state.visible}
                                onOk={this.handleOk.bind(this)}
                                onCancel={this.handleCancel.bind(this)}
                                >
                                <Row>
                                     <Col span={12} offset={6}>
                                        <Row gutter={8}>
                                        <Col span={12} >
                                            <div style={{textAlign:"right"}}>
                                                活动名称：
                                            </div>                                     
                                         </Col>
                                        <Col span={12} >
                                             <Input size="default" placeholder="large size" />
                                        </Col>
                                        </Row>
                                        <div  style={{height:10}} ></div>
                                        <Row gutter={8}>
                                        <Col span={12} >
                                            <div style={{textAlign:"right"}}>
                                                活动时间：
                                            </div>                                     
                                         </Col>
                                        <Col span={12}  >
                                            <Input size="default" placeholder="large size" />
                                        </Col>
                                        </Row>
                                        <div  style={{height:10}} ></div>
                                        <Row gutter={8}>
                                        <Col span={12} >
                                            <div style={{textAlign:"right",fontSize:12}}>
                                               每人参加活动限制：
                                            </div>                                     
                                         </Col>
                                        <Col span={12}  >
                                        <Checkbox onChange={this.checkChange.bind(this)}>不限</Checkbox>
                                        </Col>
                                        </Row>
                                        <div  style={{height:10}} ></div>
                                        <Row gutter={8}>
                                        <Col span={12} >
                                            <div style={{textAlign:"right",fontSize:12}}>
                                               交易金额要求：
                                            </div>                                     
                                         </Col>
                                        <Col span={12}  >
                                        <Checkbox onChange={this.checkChange.bind(this)}>不限</Checkbox>
                                        </Col>
                                        </Row>
                                        <div  style={{height:10}} ></div>
                                        <Row gutter={8}>
                                        <Col span={12} >
                                            <div style={{textAlign:"right",fontSize:12}}>
                                               新用户限制：
                                            </div>                                     
                                         </Col>
                                        <Col span={12}  >
                                        <Checkbox value='1' onChange={this.checkChange.bind(this)}>不限</Checkbox>
                                        </Col>
                                        </Row>
                                        <div  style={{height:10}} ></div>
                                        <Row gutter={8}>
                                        <Col span={12} >
                                            <div style={{textAlign:"right",fontSize:12}}>
                                               H5组件支持：

                                            </div>                                     
                                         </Col>
                                        <Col span={12}  >
                                        <Select defaultValue="是"
                                         size='small'
                                        style={{ width: 120 }} onChange={this.handleChange.bind(this)}>
                                            <Option value="是">是</Option>
                                            <Option value="否">否</Option>
                                           
                                        </Select>
                                        </Col>
                                        </Row>
                                        <div  style={{height:10}} ></div>
                                        <Row gutter={8}>
                                        <Col span={12} >
                                            <div style={{textAlign:"right",fontSize:12}}>
                                               活动说明：
                                            </div>                                     
                                         </Col>
                                        <Col span={12}  >
                                            <textarea onChange={this.textareaValue.bind(this)} placeholder='请输入内容'></textarea>
                                        </Col>
                                        </Row>
                                     </Col>
                                </Row>
                                </Modal>
                            </div>
             </div>
             <div  style={{height:10}} ></div>
             
            <CenterTab   />
         </div>
         </PageHeaderWrapper>


      )

    }

}

export default  UserCenter
